<template>
	<view class="article-item fboxRow bg-viewBgColor border-radius12">
		<image @click="goPage" class="pic" :src="innerData.img" mode="aspectFill"></image>
		<view class="fboxCol flex1" @click="goPage">
			<view class="title font32 lh44 font-ell2">{{ innerData.title }}</view>
			<view class="info fboxRow Ycenter font24 lh34">
				<view class="flex1">{{ innerData.editTime.substring(0, 16) }}</view>
				<view class="name">{{ innerData.articleSource }}</view>
			</view>
		</view>
		<template v-if="type == 'hotmine'">
			<view class="action-icon" @click="action"><text class="bwfont bw-dian"></text></view>
			<view class="action-more" v-if="isAction">
				<view class="arrow"></view>
				<view class="fboxCol action-list">
					<view class="action-item fboxRow Ycenter Xcenter" v-for="(item, index) in actionList" :key="index" @click="actionTap(item, index)">{{ item.label }}</view>
				</view>
			</view>
			<u-overlay :show="isAction" @click="isAction = false" :z-index="98"></u-overlay>
		</template>
	</view>
</template>

<script>
export default {
	props: {
		innerData: {
			type: Object,
			defaul: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: 'list' // list 热文列表 hotmine 我引用的文章
		},
		index: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			actionList: [{ label: '转发', value: 1 }, { label: '删除', value: 2 }],
			isAction: false
		};
	},
	created() {
		const { bw_link } = getApp().getBWData(['bw_link']);
		if (bw_link.isApp) {
			this.actionList = [{ label: '转发', value: 1 }, { label: '删除', value: 2 }];
		} else {
			this.actionList = [{ label: '删除', value: 2 }];
		}
	},
	methods: {
		goPage() {
			const data = { id: this.innerData.id };
			if (this.type == 'hotmine') {
				data.pageType = 2;
			}
			this.$pageTo(`/hotArticle/detail`, data);
		},
		action() {
			this.isAction = true;
		},
		actionTap(item, index) {
			this.isAction = false;
			const obj = { item, index, dataIndex: this.index, data: this.innerData };
			this.$emit('action', obj);
		}
	}
};
</script>

<style lang="scss" scoped>
.article-item {
	position: relative;
	margin-bottom: 24rpx;
	padding: 18rpx 24rpx 26rpx;
}
.pic {
	margin-top: 6rpx;
	width: 200rpx;
	height: 158rpx;
	margin-right: 20rpx;
	border-radius: 12rpx;
}
// @media screen and (min-width:780px) {
// 	.pic{
// 		height: 316rpx;
// 		width: 400rpx;
// 	}
// }
.action-icon {
	padding: 10rpx 0 0;
	color: var(--contentFontFourColor);
}
.action-icon .bwfont {
	font-size: 28rpx;
}
.action-more {
	position: absolute;
	top: 80rpx;
	right: 0;
	padding: 0 20rpx;
	z-index: 99;
}
// .arrow{position:absolute;top: -20rpx;right: 40rpx;border: 10rpx solid transparent; border-bottom: 10rpx solid #abcdef;}
.action-list {
	padding: 8rpx 0;
	min-width: 138rpx;
	background-color: var(--popupBackColor);
	border-radius: 12rpx;
}
.action-item {
	padding: 18rpx 22rpx;
	line-height: 34rpx;
	text-align: center;
	color: var(--contentBgImageTitleColor);
}
.action-item .bwfont {
	margin-right: 16rpx;
}
.info {
	margin-top: 44rpx;
	color: var(--contentFontFourColor);
}
.title {
	height: 88rpx;
}
</style>
